<template>
  <div class="homeWraper">
  <el-container  style="height:100%" direction="vertical">
      <el-header><!-- 头部区 -->
          <div>
              <span>校园志愿活动发布平台</span>
          </div>
          <el-button type="info" @click="logout">退出</el-button>
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
          <!-- 侧边栏 -->
          <el-aside width="200px">
            <el-menu
                    background-color="#b5c4b1"
                     text-color="#fff"
                    active-text-color="#ffd04b" default-active="1" router>
             <el-submenu index="1">
               <template slot="title">
                   <i class="el-icon-location"></i>
                           <span>活动发布</span>
                                          </template>
               <el-menu-item-group>
     
                       <el-menu-item index="/home/activity">校园活动通知</el-menu-item>
                       <el-menu-item index="/home/volunteer">志愿活动发布</el-menu-item>
               </el-menu-item-group>
   
             </el-submenu>
  
                       <el-menu-item index="/home/document" >
                                <i class="el-icon-document"></i>
                                <span slot="title">个人中心</span>
                       </el-menu-item>
 
            </el-menu>
          </el-aside>
          <!-- 右侧内容主体 -->
          <el-main><router-view></router-view>
            
          </el-main>
      </el-container>
    </el-container>
</div>
</template>

<script>
export default {
  methods:{
      logout(){
          window.sessionStorage.clear();
<<<<<<< HEAD
          this.$router.push('/');
=======
          this.$router.push('/login');
>>>>>>> 115e22a (更新)
      }
  }
};
</script>

<style lang="less" scoped>
 
 .homeWraper{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
 }
 .el-container{
  padding:0px;
  margin:0px;
  height:100%;
 }

.el-header{
   background-color: #96a48b;
   display: flex; //设置显示为flex布局
  justify-content: space-between; //设置为flex左右布局
  padding-left: 0; //左内边距为0（Logo贴左边）
   align-items: center;//元素上下居中（防止右边按钮贴上下边）
   color: rgb(255, 255, 255);
   font-size: 20px;
   > div {//内嵌的div样式

       span {
           margin-left: 15px;//文字左侧设置间距，防止与Logo紧贴
       }
   }
}
.el-aside{
   background-color: #b5c4b1;
}
.el-main{
   background-color: #eaedf1;
}
</style>



